<!--  -->
<template>
  <div>
    <fullscreen ref="fullscreen" @change="fullscreenChange" class="myfullscreen">
      <FullCalendar
        defaultView="dayGridMonth"
        contentheight="300"
        :plugins="calendarPlugins"
        locale="zh-cn"
        :header="{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,listWeek'
      }"
        :buttonText="buttonText"
        :events="calendarEvents"
        @dateClick="handleDateClick"
        @eventClick="handleEventClick"
        id="calendar"
      />
      <at-button icon="icon-maximize" title="全屏" @click="toggle" class="fullscreenbutton"></at-button>
    </fullscreen>

    <el-dialog :visible.sync="eventmodal" width="30%" class="modal">
      <div class="mymodalcontent">
        <h1>会议详情</h1>
        <div class="eventdata">
          <div class="eventdataitem" v-for="(value,key,index) in eventmodaldata" :key="index">
            <div class="title">{{key}}:</div>
            <div class="val">{{value}}</div>
          </div>
        </div>
        <div class="modalbuttons">
          <el-button @click="eventmodal = false">取 消</el-button>
          <el-button
            @click="copy"
            type="primary"
            class="tag-read"
            :data-clipboard-text="swipercopycontent"
          >复 制</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Calendar } from "@fullcalendar/core";
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import Clipboard from "clipboard";
import interactionPlugin from "@fullcalendar/interaction";
import fullscreen from "vue-fullscreen";
import { mapState, mapMutations } from "vuex";
import {
  setCookie,
  getCookie,
  removeCookie,
  GMTToStr
} from "../../assets/js/common";
import { fetch, post } from "../../config/request";
export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarPlugins: [
        interactionPlugin,
        dayGridPlugin,
        timeGridPlugin,
        listPlugin
      ],
      buttonText: {
        today: "今天",
        month: "月",
        week: "周",
        day: "天",
        list: "列表"
      },
      calendarEvents: [],
      views: {
        week: {
          // name of view
          titleFormat: "YYYY-MM-DD hh:mm:ss"
          // other view-specific options here
        }
      },
      eventmodal: false,
      eventmodaldata: {},
      swipercopycontent: "",
      fullscreen: false,
      meetinglist: [],
      size: 10
    };
  },
  created() {
    //this.getevent();
    let meetingstate = this.$store.state.meetings;
    if (meetingstate.length == 0) {
      this.getlist();
    } else {
      this.meetings = JSON.parse(JSON.stringify(this.$store.state.meetings));
      this.meetings.map((item, index) => {
        this.calendarEvents.push({
          title: item.name,
          start: GMTToStr(item.startTime),
          end: GMTToStr(item.endTime)
        });
      });
    }
  },
  computed: { ...mapState(["meetings"]) },
  methods: {
    async getlist() {
      let meetinglist = [];
      let total = await this.calculatepage();
      let count = Math.ceil(total / this.size);
      for (let i = 0; i < count; i++) {
        let pushdata = await this.getmeetings(i + 1);
        meetinglist = meetinglist.concat(pushdata);
      }
      this.changeMeetings({
        meetings: meetinglist
      });
      console.log(meetinglist);
      meetinglist.map((item, index) => {
        this.calendarEvents.push({
          title: item.name,
          start: GMTToStr(item.startTime),
          end: GMTToStr(item.endTime)
        });
      });
      console.log(this.calendarEvents);
    },
    calculatepage() {
      return new Promise((resolve, reject) => {
        fetch("/api/api/user/meeting?size=" + this.size).then(res => {
          resolve(res.data.meetings.total);
        });
      });
    },
    getmeetings(page) {
      return new Promise((resolve, reject) => {
        fetch("/api/api/user/meeting?size=" + this.size + "&page=" + page).then(
          res => {
            let list = res.data.meetings.list;
            let total = res.data.meetings.total;
            resolve(res.data.meetings.list);
          }
        );
      });
    },
    handleDateClick(arg) {
      //   if (confirm("Would you like to add an event to " + arg.dateStr + " ?")) {
      //     this.calendarEvents.push({
      //       // add new event data
      //       title: "New Event",
      //       start: arg.date,
      //       allDay: arg.allDay
      //     });
      //   }
    },
    handleEventClick(info) {
      console.log(info);
      this.eventmodaldata = {
        会议名称: info.event.title,
        开始时间: GMTToStr(info.event.start),
        结束时间: GMTToStr(info.event.end)
      };
      var str = "";
      var clipdata = this.eventmodaldata;
      for (let key in clipdata) {
        str += key + ":" + clipdata[key] + "\n";
      }
      this.swipercopycontent = str;
      this.eventmodal = true;
    },
    //复制
    copy() {
      var that = this;

      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", e => {
        this.$Notify.success({
          title: "复制成功"
        });
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        this.$Notify.error({
          title: "该浏览器不支持自动复制"
        });
        clipboard.destroy();
      });
    },
    toggle() {
      this.$refs["fullscreen"].toggle(); // recommended
      // this.fullscreen = !this.fullscreen // deprecated
    },
    fullscreenChange(fullscreen) {
      this.fullscreen = fullscreen;
    },
    ...mapMutations(["changeMeetings"])
  }
};
</script>
<style scoped lang="scss">
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";
@import "~@fullcalendar/list/main.css";
@import "../../assets/css/elcss.css";
.modal {
  .mymodalcontent {
    display: block !important;
    padding: 20px 50px;
    .eventdata {
      width: 100%;
      padding: 20px 0;
      .eventdataitem {
        display: flex;
        padding: 5px 0;
        margin: 10px;
        border-bottom: 1px solid rgba(204, 204, 204, 0.507);
        justify-content: space-between;
      }
    }
  }
}
.myfullscreen {
  position: relative !important;
  background: white !important;
  padding-top: 35px;
  .fullscreenbutton {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
  }
}
</style>
